<template>
  <div style="width:100vw;height:93vh">
    <div
      class="match-detail"
      style="position: fixed; top: 1rem !important; width: 100%; height: 100%"
    >
      <header-com :title="title" moduleName="match_going"></header-com>
    </div>
    <div class="notice_top">
      <van-field
            readonly  
            clickable
            label="比赛日期 "
            :value="value"
            placeholder="请选择日期"
            @click="showPicker = true"
          />
    
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="com_time"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <div v-if="notice" class="notice"><img src="http://qncdn.tissys.com/mobile/assets/img/notice.svg" alt="" class="imgicon"><a target="_blank"
				 :href="noticeConent">最新通知</a>
         </div>
    </div>
   
    <!-- <div class="clone_ground_name" :style="{transform:'translateX('+(moveY) +'px)'}">
		<div class="ground_name" v-for="(item,index) in roundSwiper" :key="index">{{item}}</div>
	</div>	 -->

    <!-- <scroller ref="myscroller"> -->
      <div class="roundSwiper_top" >
       <div class="roundSwiper" @touchmove="handleMove"  style="margin-top: 1.8rem;">
      <div class="content" v-for="(item, index) in roundSwiper" :key="index">
        <div class="ground_name">{{ item.name }}</div>
        <div
          :class="
            group.status < 2 || group.id === undefined
              ? 'field_li'
              : 'field_li_a'
          "
          @click="isPopup(index, group_index, group)"
          v-for="(group, group_index) in schedule[index]"
          :key="group.id"
          
        >
<div v-if="group.id !== undefined">


          <div class="li_top">
            <div class="li_top_left" v-if="group_index == 0 && group.note">
              {{ group.note }}
            </div>
            <div
              class="li_top_left"
              v-else-if="group_index == 0 && group.note == null"
            >
              开始时间
            </div>
            <div class="li_top_left" v-else>
              {{ !group.note ? "紧跟前场" : group.note }}
            </div>

            <div class="li_top_right" v-if="group_index>=4" :style="group_index < 4 ? '':'flex:1'">
              <div class="li_top_right_item"><span style="display:inline-block;width:10.667vw;text-align: right;height:6.667vw;overflow:hidden">{{item.name.replace("场地","")}}</span><span>-{{ group.place.row }}</span></div>
              <!-- <div></div> -->
            </div>
            <div class="li_top_right" v-else :style="group_index < 4 ? '':'flex:1'">
              <div>{{ group.place.row }}&nbsp;</div>
            </div>
          </div>
          <!-- 选手a -->
          <div
            :class="group.name_a === group.win_site ? 'active_name' : 'name_a'"
            v-for="name in getname(group.name_a)"
            :key="name"
          >
            <div v-if="group.team_name_a">
              {{ group.site_a == group.team_name_a ? "" : group.site_a
              }}&nbsp;{{ group.team_name_a }}
            </div>
            <div v-else>
              {{ group.site_a == group.name_a ? "" : group.site_a }}&nbsp;{{ name }}
            </div>
          </div>
          <!-- vs -->
          <div class="score_li">
            <div class="vs">vs</div>
            <div class="score">
              <div class="score_top">
                <div v-for="(score, index) in group.score" v-if="score.top!==''" :key="index + '_'">
                <span class="scoretop">{{ score.top }}</span>         
                  <span class="tiebreak" v-if="score.top < score.bot && score.tiebreak !== ''">{{score.tiebreak}}</span>                
                  </div>
                <!-- <div v-for="(i, j) in getScoreItem(group.score)" :key="j"></div> -->
                <!-- <div></div> -->
              </div>
              <div class="score_bottom">
                <div v-for="(score, index) in group.score" v-if="score.bot!==''" :key="index + '_'">
                 <span class="scoretop"> {{ score.bot }}</span>
                  <span class="tiebreak tkbomttom" v-if="score.top > score.bot && score.tiebreak  !== ''">{{score.tiebreak}}</span> 
                </div>
                <!-- <div v-for="(i, j) in getScoreItem(group.score)" :key="j"></div> -->
              </div>
            </div>
          </div>
          <!--选手b  -->
          <div
            :class="group.name_b === group.win_site ? 'active_name' : 'name_a'"
            v-for="name in getname(group.name_b)"
            :key="name"
          >
            <div v-if="group.team_name_b">
              {{ group.site_b == group.team_name_b ? "" : group.site_b
              }}&nbsp;{{ group.team_name_b }}
            </div>
            <div v-else>
              {{ group.site_b == group.name_b ? "" : group.site_b }}&nbsp;{{ name }}
            </div>
          </div>
          <div class="formant"  :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff' }">
            {{ group.group_name }}
          </div>
          <div class="formant"  :style="{ backgroundColor: getCurrentProject(group.group_id) ,color:'#ffffff' }">
            {{ group.wheel_name }}
          </div>
          <div class="match_time">
            <div v-if="group.match_time"   :style="{ backgroundColor: getCurrentProject(group.group_id) ,color:'#ffffff' }">{{ group.match_time }}</div>
            <div v-else  :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff'}">&nbsp;</div>
          </div>
          <!-- <div class="triangle" :style="{ borderBottomColor: signColor(group.group_id)}"></div> -->
          <!-- <div
            class="triangle"
           
          ></div> -->
 </div>
        </div>


      </div>
    </div> 
      </div>
    

    <van-popup v-model="show" class="team_big">
      <div class="team" @click="show = false">
        <div class="team_header">
          {{ ground_name }}-第{{ team_row }}场序&nbsp;最大场序：{{
            team_field_max
          }}
        </div>
        <div
          class="team_li"
          v-for="(team, team_index) in team_platoon"
          :key="team_index"
        >
          <div style="display: flex; margin: 5px 0">
            <div class="team_time">
              {{ team_index + 1 }}、{{ team.group_name }}第{{
                team.stage
              }}阶段&nbsp;第{{ team.team_field }}轮-{{ team.place }}
            </div>
            <div>{{ team.match_time }}</div>
          </div>

          <div>
            <span>分数：</span>{{ team.team_name_a }}&nbsp;&nbsp;{{
              team.name_a
            }}
          </div>
          <div class="grade">
            <!-- 分数左 -->
            <div class="opponent" v-if="team.sign_id_a == team.winner_id">
              <div style="color: #65b500; margin-top: 0.02rem">胜者</div>
              <div>vs</div>
              <div>败者</div>
            </div>
            <div class="opponent" v-else-if="team.sign_id_b == team.winner_id">
              <div style="margin-top: 0.02rem">败者</div>
              <div>vs</div>
              <div style="color: #65b500">胜者</div>
            </div>
            <div class="opponent" v-else>
              <div style="color: #65b500">&nbsp;</div>
              <div>vs</div>
              <div>&nbsp;</div>
            </div>
            <!-- 分数右 -->
            <div class="grade_right">
              <div class="grade_top">
                <div v-for="(score, index) in team.score" :key="index + '_'">
                  {{ score.top }}
                </div>
                <div v-for="(i, j) in getScoreItem(team.score)" :key="j"></div>

              </div>
              <div class="grade_top">
                <div v-for="(score, index) in team.score" :key="index + '_'">
                  {{ score.bot }}
                </div>
                <div v-for="(i, j) in getScoreItem(team.score)" :key="j"></div>
              </div>
              <div class="tiebreak">
                <div v-for="(score, index) in team.score" :key="index + '_'">
                  {{ score.tiebreak }}
                </div>
                <div v-for="(i, j) in getScoreItem(team.score)" :key="j"></div>
              </div>
            </div>
          </div>
          <div style="padding-left: 0.9rem">
            {{ team.team_name_b }}&nbsp;&nbsp;{{ team.name_b }}
          </div>
        </div>
      </div>
    </van-popup>
    <!-- </scroller> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      roundSwiper: [],
      title: this.$route.query.name,
      com_id: "",
      com_time: [],
      schedule: [],
      value: "",
      showPicker: false,
      id: "",
      moveY: 0,
      show: false,
      team_id: "",
      team_platoon: [], //团队列表
      team_row: "", //团队场序
      ground_name: "",
      team_field_max: "",
      colorList: [],
      name_list: [],
      start_date: "",
      notice:false,//显示消息
      noticeConent: null//消息通知
    };
  },
  mounted() {
    this.$store.commit("SET_MSG", this.$route.query.id);
    this.com_id = localStorage.getItem("index");
    this.getmatchInfo();
    this.getNotice()
    // this.move = this.throttle(this.changeMoveY,20)
  },
  methods: {
    isPopup(index, group_index, group = undefined) {
      // if(!group)
      let type = this.schedule[index][group_index].type;
      let status = this.schedule[index][group_index].status;
      let bstatus = this.schedule[index][group_index].bstatus;
      let pandect_id = this.schedule[index][group_index].pandect_id;
      let name = this.schedule[index][group_index].group_name;
      if (type != 2 && status == 1 && (bstatus == 2 || bstatus == 4)) {
        // pandect_id  mark:0 com_id
        this.$router.push({
          path: "/have",
          query: {
            live_status: 0,
            pandect_id: pandect_id,
            mark: 0,
            com_id: this.com_id,
            ground: this.roundSwiper[index].name,
            name,
            indexs: 0,
            status: 2,
          },
          // ?&cover&device_url&name=甲组女双&ground=1号场地&indexs=0&status=2&mark=0&pandect_id=37844
        });
        return;
      } else if (type == 2) {
        this.team_id = this.schedule[index][group_index].id;
        this.team_row = this.schedule[index][group_index].place.row;
        let params = new URLSearchParams();
        params.append("id", this.team_id);
        this.$axios
          .post("/mobile/v1/calendar/team_detail", params)
          .then((suc) => {
            console.log(suc);
            if (suc.data.code == 200) {
              this.team_platoon = suc.data.data.team_platoon;
              this.ground_name = suc.data.data.ground_name;
              this.team_field_max = suc.data.data.team_field_max;
            }
          })
          .catch((res) => {});
        this.show = true;
      }
    },
    handleMove() {
      // this.move()
      this.moveY = -window.scrollX;
    },
    onConfirm(value) {
      // console.log(value);
      this.value = value;
      this.schedule = [];
      this.start_date = value;
      this.getmatchInfo(true);
      this.showPicker = false;
    },
    getScoreItem(arr) {
      if (!arr) return new Array(0);
      let size = 3 - arr.length;
      if (size > 0) return new Array(size);
      return [];
    },
    getCurrentProject(id) {
      let arr = this.colorList.filter((item) => {
        return item.id == id;
      });
      return arr[0].color;
    },
    Search() {
      let arr = [];
      for (let i = 1; i < this.schedule.length; i++) {
        this.schedule.forEach((e) => {
          if (e.place.col == 1) {
            arr[i].push(e);
          }
        });
      }
    },
    getNotice(com_id) {
				var params = new URLSearchParams();
				params.append("com_id", this.com_id);
				this.$axios
					.post("/mobile/matching/get_notice", params)
					.then(data => {
						if (data.data.code == 2000) {
							this.notice = true
							this.noticeConent = data.data.data[0]
						}
					})
					.catch(res => {});
			},
    getmatchInfo(flag = false) {
      let params = new URLSearchParams();
      params.append("com_id", this.com_id);
      params.append("start_date", this.start_date);
      this.$axios
        .post("/mobile/v1/calendar/match_info", params)
        .then((data) => {
          if (data.data.code == 200) {
            this.com_time = data.data.data.com_time;
            this.id = data.data.data.id;
            this.roundSwiper = data.data.data.ground_name;
            if(!flag)this.value = data.data.data.com_time[0];
            this.colorList = data.data.data.group_list;
            this.getmatchSchedule();
          }
          console.log(this.colorList);
        })
        .catch((res) => {});
    },
    getname(name) {
      if (name) {
        let nameL = name.split(",").length;
        if (nameL > 2) {
          // var new_name = name.substring(0,name.length-2);
          var arr = name.split(",");
          let name_a = arr[0] + "-" + arr[arr.length - 1];
          this.name_list[0] = name_a;
          return this.name_list;
        } else {
          this.name_list[0] = name;
          return this.name_list;
        }
      } else {
        let name_b = "";
        this.name_list[0] = name_b;
        return this.name_list;
      }
    },
    getmatchSchedule() {
      // console.log(this.value);
      let params = new URLSearchParams();
      params.append("com_id", this.id);
      params.append("date", this.value);
      // params.append("date", this.value);
      this.$axios
        .post("/mobile/v1/calendar/match_schedule", params)
        .then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            this.roundSwiper.forEach((ele, index) => {
              let arr = data.data.data.filter((item) => {
                return item.place.col == ele.col;
              });
              arr = arr.sort((a, b) => {
                return Number(a.place.row) - Number(b.place.row);
              });

              // let row = arr.slice(-1)[0].place.row / 1;
              
              let temp = new Array(Number(arr.slice(-1)[0].place.row)).fill({});
              let row = Number(arr.slice(-1)[0].place.row);
              for (let i = 0; i < row; i++) {
                for (let j = 0; j < arr.length; j++) {
                  if (arr[j].place.row == i + 1) {
                    temp[i] = arr[j];
                    break;
                  }
                }
              }
              this.schedule.push(temp);
            });
            console.log(this.schedule);
          }
        })
        .catch((res) => {});
    },
    infinite: function (done) {
      if (this.noDate) {
        this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
      } else {
        setTimeout(() => {
          this.offset++; //下拉一次页数+1
          this.no_ongoing_match(done);
          done(); //进行下一次加载操作
        }, 500);
      }
    },
    refresh: function (done) {
      this.offset = 1;
      this.noDate = false;
      setTimeout(
        function () {
          this.no_ongoing_match(done);
          this.$refs.myscroller.finishPullToRefresh(); //停止下拉刷新动效
        }.bind(this),
        300
      );
    },
    scroll() {
      let scroller = this.$refs.myscroller;
      scroller.scrollTo(0, 0, true);
    },
  },
};
</script> 
<style scoped>
.notice_top{
    width: 100vw;
     /* padding-top: 10.667vw;  */
    position: fixed;
    top: 1.7rem;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
}
.notice {
		background: #bce0cc;
		height: 0.9rem;
		display: flex;
		align-items: center;
		justify-content: center;
    width: 26.667vw;
    }
 .notice  a {
			color: #d81e06;
			display: inline-block;
			font-size: 0.31rem;
			font-weight: 700;
		}
.fixed {
  position: fixed;
  bottom: 13.333vw;
  right: 2.667vw;
  width: 8vw;
  height: 8vw;
  font-size: 6.933vw;
}
.match-detail {
  margin-bottom: 0rem;
}
.tabs {
  position: fixed;
  top: 12vw;
  z-index: 9999;
  width: 100%;
}
.roundSwiper_top{
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.roundSwiper {
  width: 95vw;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5.333vw;
  padding: 0 2.133vw;
  font-size: 4vw;
  line-height: 6.667vw;
  padding-bottom: 0.6rem;


}
.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}
.field_li {
  width: 31.467vw;
  height: 37.654vw;
  font-size: 3.2vw;
  border: solid 0.267vw #e9e9e9;
  position: relative;
}
.field_li_a {
  min-width: 31.467vw;
  min-height: 37.654vw;
  font-size: 3.2vw;
  background-color: #b7e5d0;
  border: solid 0.267vw #e9e9e9;
  position: relative;
}
.li_top {
  display: flex;
  height: 5.333vw;
  line-height: 5.333vw;
}
.li_top_left {
  color: #4d6654;
  flex: 1;
  text-align: center;
  overflow: hidden;
  border: solid 0.267vw #e9e9e9;
  border-left: none;
  border-top: none;
}
.li_top_right {
  overflow: hidden;
  color: #666666;
  display: flex;
  text-align: center;
}
.li_top_right div{
    line-height: 5.333vw;
      /* transform: scale(0.8); */
}
.li_top_right_item{
  width: 9.333vw;
  flex: 1;
  line-height: 5.333vw;
  display: flex;
  justify-content: space-evenly;
  /* transform: scale(1); */
}
.li_top_right_item span{
  display: inline-block;
}

.name_a {
  width: 100%;
  height: 5.333vw;
  line-height: 5.333vw;
  line-height: 5.333vw;
  font-size: 3.733vw;
  text-align: center;
  overflow: hidden;
}
/* 获胜name */
.active_name {
  width: 100%;
  height: 5.333vw;
  line-height: 5.333vw;
  line-height: 5.333vw;
  font-size: 3.733vw;
  text-align: center;
  color: #65b500;
  overflow: hidden;
}
.score_li {
  display: flex;
  height: 8vw;
  width: 26.667vw;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
.vs {
  flex: 3;
  height: 8vw;
  line-height: 8vw;
  border: dashed 0.267vw #ccc;
  border-left: none;
}
.score {
  flex: 6;
  display: flex;
  flex-direction: column;
}
.score_top,
.score_bottom {
  display: flex;
  height: 4vw;
  line-height: 4vw;
}
.score_top{
  position: relative;
  display: flex;
}
.scoretop{
  display: inline-block;
}
.tiebreak{
  display: inline-block;
  position: absolute;
  transform: scale(0.7);
  top: -0.533vw;
}
.tkbomttom{
  top: 13.867vw;
}
.score_top div {
  flex: 1;
  border: dashed 0.267vw #ccc;
}
.score_bottom div {
  flex: 1;
  border: dashed 0.267vw #ccc;
}
.formant {
  height: 4vw;
  width: 100%;
  line-height: 4vw;
  font-size: 3.2vw;
}
.match_time {
  height: 5.333vw;
  line-height: 5.333vw;
  width: 100%;
  overflow: hidden;
}
.triangle {
  /* position: absolute;
    right: -0.3rem;
    bottom: -0.3rem;
    width: 0.6rem;
    height: 0.6rem;
    transform: rotate(45deg); */
  width: 0;
  height: 0;
  border-bottom: 8.333vw solid;
  border-left: 8.333vw solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}
.ground_name {
  min-width: 31.467vw;
  background-color: #d9f1e6;
  border-left: #ccc;
  border-right: #ccc;
  overflow: hidden;
  height: 6.667vw;
}
.van-cell {
  height: 0.9rem;
  line-height: 0.9rem;
  padding: 0;
  /* position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  z-index: 10; */
  flex: 1;
  font-size: 0.3rem;
}
.clone_ground_name {
  height: 0.7rem;
  line-height: 0.7rem;
  position: fixed;
  top: 130px;
  display: flex;
  left: 2.133vw;
  z-index: 8;
}
.clone_ground_name .ground_name {
  width: 32vw;
  background-color: #d9f1e6;
  border-left: #ccc;
  border-right: #ccc;
}
.team {
  width: 6.2rem;
  text-align: left;
  padding: 0 0.4rem;
  padding-top: 0.2rem;
}
.team_li {
  margin-bottom: 0.4rem;
}
.grade {
  display: flex;
  width: 80%;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
}
.opponent {
  flex: 1;
  text-align: center;
  height: 0.86rem;
  font-size: 0.28rem;
  line-height: 0.28rem;
  border: dashed 0.267vw #ccc;
  border-left: none;
}
.grade_right {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.grade_top {
  padding-left: 0 !important;
}
.grade_right div {
  display: flex;
  flex: 1;
  height: 0.4rem;
  padding-left: 0.1rem;
  line-height: 0.4rem;
  text-align: center;
  border: dashed 1px #ccc;
  border-left: none;
  border-bottom: none;
}
.tiebreak {
  padding: 0 !important;
}
.tiebreak div {
  border: solid 1px #dcdfe6 !important;
  border-radius: 0.04rem;
  padding-left: 0.08rem !important;
}
.team_time {
  flex: 1;
}
.team_big {
  border-radius: 0.2rem;
}
</style>
